<template>
  <div class="page-order-list">
    <div class="picture">
      <img src="../../../../images/sp.png" alt="">
    </div>
    <div class="page-order-detail">
      <p>春季里开花十四五六春季里开花十四五六春季里开花十四五六</p>
      <span style="color: #ccc;">颜色：白色 尺码：M 数量：1</span>
    </div>
    <div class="pay">待付款</div>
    <div class="pay-count">
      <span>￥99.00</span>
      <span>(含运费：￥10.00)</span>
      <span>在线支付</span>
    </div>
    <div class="look-detail">
      <button class="btn">立即付款</button>
      <a href="JavaScript:;">查看详情</a>
      <a href="JavaScript:;">
        <slot></slot>
      </a>
    </div>
  </div>
</template>

<script setup lang='ts'>
</script>
<style scoped lang='less'>
.page-order-list {
  width: 960px;
  height: 137px;
  border: 1px solid #f4f4f4;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .picture {
    width: 106px;
    height: 106px;
    // background-color: aquamarine;
  }

  .page-order-detail {
    width: 246px;
    height: 106px;
    // background-color: bisque;
    padding-top: 25px;


  }

  .pay {
    width: 200px;
    height: 106px;
    color: red;
    line-height: 106px;
    text-align: center;

  }

  .pay-count {
    width: 200px;
    height: 106px;
    // background-color: bisque;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .look-detail {
    width: 180px;
    height: 106px;
    // background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .btn {
      width: 94px;
      height: 30px;
      border-radius: 4px;
      background-color: #27ba9b;
      color: #fff;
      border: 1px solid #27ba9b;
      margin: 5px;
    }
  }
}
</style>